<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css" media="all"/>
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery-2.1.1.min.js"></script>
</head>
<body>
    <!--数据表格-->
    <table id="goodsTable" lay-filter="goods">
        <thead>
        <tr class="layui-bg-cyan">
            <th>编号</th>h
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>住址</th>
            <th>联系方式</th>
            <th>邮箱</th>
        </tr>
        </thead>
        <!--绑定数据-->
        <tbody id="show"></tbody>
    </table>
    <!--分页-->
    <div id="pageDemo"></div>
</body>
<!--编写模板-->
<script type="text/html" id="tablePage">
    {{#  layui.each(d, function(index, item){ }}
    <tr>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.age}}</td>
        <td>{{item.address}}</td>
        <td>{{item.number}}</td>
        <td>{{item.email}}</td>
    </tr>
    {{# }); }}
</script>
<script>
    layui.use(['laypage','jquery','laytpl'],function () {
        var laypage = layui.laypage;
        var $ = layui.jquery;
        var laytpl = layui.laytpl;

        $.getJSON('http://localhost:82/goods/findTplPage',function (data) {
            var str=[];
            //遍历得到的数据
            $.each(data, function(i,item) {
                str=item;
            });
            console.log(str);

            laypage.render({
                elem: 'pageDemo',
                limit: 3,
                theme: '#1E9FFF',
                count: str.length,
                limits:[5,10,20,30],
                layout: ['count', 'prev','page', 'next', 'limit', 'skip'],
                jump: function(obj){
                    var whatSource=str.concat().splice(obj.curr*obj.limit-obj.limit,obj.limit);
                    console.log(whatSource);

                    var getTpl = tablePage.innerHTML;//获取id为demo标签的所有内容
                    var view = document.getElementById('show');

                    //模板渲染
                    laytpl(getTpl).render(whatSource,function(html){
                        view.innerHTML = html;
                    });
                }
            });
        })
    })
</script>
</html>